<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
			 xmlns:h="http://java.sun.com/jsf/html"
			 xmlns:f="http://java.sun.com/jsf/core"
			 xmlns:ui="http://java.sun.com/jsf/facelets"
			 xmlns:rich="http://richfaces.org/rich"
			 xmlns:a4j="http://richfaces.org/a4j"
			 xmlns:b="http://richfaces.org/sandbox/bootstrap">

	<h:form id="condition_form">
	<div class="modal confirmation hide" id="modal-condition">
		<h:panelGroup layout="block" id="modal-condition-wrapper">
		<div class="modal-header">
			<!-- <button class="modal-close" data-dismiss="modal" title="Close">Close</button> -->
			<h3><span id="conditionOp">#{msg['redirect.admin.condition.h.condition.add']}</span> #{msg['redirect.admin.condition.h.condition']}</h3>
		</div>
		<div class="modal-body">
			<p style="visibility: hidden;" class="subtitle">#{msg['redirect.admin.condition.fieldreq']}</p>
			<div class="control-group">
				<label class="control-label" for="condition_name">#{msg['redirect.admin.condition.condition.name']} </label>
				<h:inputText styleClass="input-large" required="true" requiredMessage="Value required" id="condition_name" value="#{rdrEdit.editedCondition.name}" maxlength="40" onkeyup="validateConditionName()" />
				<h:message id="condition_name-message" for="condition_name" />
			</div><!-- End .control-group -->
			<div class="control-group">
				<h:panelGroup id="uasHolder" layout="block">
				<table class="table table-striped" id="condition-string" summary="Redirect condition">
					<thead>
						<tr>
							<th scope="col">#{msg['redirect.admin.condition.agent.string']} <i class="icon-info-sign icon-gray tooltipTrigger data-placement-right" title="#{msg['redirect.admin.condition.agent.string.accept']}">#{msg['redirect.admin.condition.agent.string.accept']}</i></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>
								<label>#{msg['redirect.admin.condition.contains']}</label>
								<ui:param name="isContainsEmpty" value="#{rdrEdit.editedCondition == null or rdrEdit.editedCondition.userAgentConditions == null or rdrEdit.editedCondition.userAgentConditions.contains == null or rdrEdit.editedCondition.userAgentConditions.contains.size() == 0}" />
								<ui:repeat value="#{rdrEdit.editedCondition.userAgentConditions.contains}" var="rcUACcont" varStatus="counter">
									<div class="#{counter.index > 0 ? 'more-condition' : 'condition'}">
										<h:panelGroup styleClass="td-condition" rendered="#{counter.index > 0}">OR</h:panelGroup>
										<b:input id="rcuaccont" styleClass="contains-input" value="#{rdrEdit.editedCondition.userAgentConditions.contains[counter.index]}" placeholder="eg: (?i)i(phone|pad|pod)" />
										<div class="action">
											<span class="tooltipTrigger" title="#{msg['redirect.admin.condition.exp.delete']}">
												<a4j:commandLink action="#{rdrEdit.removeContains(counter.index)}" render="uasHolder" onclick="$(this).tooltip('hide');"><i class="icon-trash">#{msg['redirect.admin.condition.exp.delete']}</i></a4j:commandLink>
											</span>
											<a4j:commandLink action="#{rdrEdit.addContains}" styleClass="add-user-agent-string tooltipTrigger" title="#{msg['redirect.admin.condition.exp.add']}" render="uasHolder" onclick="$(this).tooltip('hide');" oncomplete="$('.contains-input').last().focus();" style="#{counter.last ? '' : 'visibility: hidden;'}"><i class="icon-plus-sign">#{msg['redirect.admin.condition.exp.add']}</i></a4j:commandLink>
										</div>
									</div>
								</ui:repeat>
								<div class="#{isContainsEmpty ? 'condition' : 'more-condition'}" style="#{isContainsEmpty ? '' : 'display: none;'}">
									<h:panelGroup styleClass="td-condition" rendered="#{not isContainsEmpty}">#{msg['redirect.admin.condition.exp.or']}</h:panelGroup>
									<h:inputText id="rcuaccont" style="visibility: hidden;"/>
									<div class="action">
										<!-- only present for proper spacing -->
										<a4j:commandLink style="visibility: hidden;" action="#{rdrEdit.removeContains(counter.index)}" render="uasHolder" onclick="$(this).tooltip('hide');"><i class="icon-trash">#{msg['redirect.admin.condition.exp.delete']}</i></a4j:commandLink>
										<a4j:commandLink action="#{rdrEdit.addContains}" styleClass="add-user-agent-string tooltipTrigger" title="Add" render="uasHolder" onclick="$(this).tooltip('hide');" oncomplete="$('.contains-input').last().focus();"><i class="icon-plus-sign">#{msg['redirect.admin.condition.exp.add']}</i></a4j:commandLink>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<label>#{msg['redirect.admin.condition.nocontains']}</label>
								<ui:param name="isDoesNotContainEmpty" value="#{rdrEdit.editedCondition == null or rdrEdit.editedCondition.userAgentConditions == null or rdrEdit.editedCondition.userAgentConditions.doesNotContain == null or rdrEdit.editedCondition.userAgentConditions.doesNotContain.size() == 0}" />
								<ui:repeat value="#{rdrEdit.editedCondition.userAgentConditions.doesNotContain}" var="rcUACdncont" varStatus="counter">
									<div class="#{counter.index == 0 ? 'condition' : 'more-condition'}">
										<h:panelGroup styleClass="td-condition" rendered="#{counter.index > 0}">OR</h:panelGroup>
										<b:input id="rcuacdncont" styleClass="doesnotcontain-input" value="#{rdrEdit.editedCondition.userAgentConditions.doesNotContain[counter.index]}" placeholder="eg: (?i)i(phone|pad|pod)" />
										<div class="action">
											<span class="tooltipTrigger" title="#{msg['redirect.admin.condition.exp.delete']}">
												<a4j:commandLink action="#{rdrEdit.removeDoesNotContain(counter.index)}" render="uasHolder" onclick="$(this).tooltip('hide');"><i class="icon-trash">"#{msg['redirect.admin.condition.exp.delete']}</i></a4j:commandLink>
											</span>
											<a4j:commandLink action="#{rdrEdit.addDoesNotContain}" styleClass="add-user-agent-string tooltipTrigger" title="#{msg['redirect.admin.condition.exp.add']}" render="uasHolder" onclick="$(this).tooltip('hide');" oncomplete="$('.doesnotcontain-input').last().focus();" style="#{counter.last ? '' : 'visibility: hidden;'}"><i class="icon-plus-sign">#{msg['redirect.admin.condition.exp.add']}</i></a4j:commandLink>
										</div>
									</div>
								</ui:repeat>
								<div class="#{isDoesNotContainEmpty ? 'condition' : 'more-condition'}" style="#{isDoesNotContainEmpty ? '' : 'display: none;'}">
									<h:panelGroup styleClass="td-condition" rendered="#{not isDoesNotContainEmpty}">#{msg['redirect.admin.condition.exp.or']}</h:panelGroup>
									<h:inputText id="rcuacdncont" style="visibility: hidden;" />
									<div class="action">
										<!-- only present for proper spacing -->
										<a4j:commandLink style="visibility: hidden;" action="#{rdrEdit.removeDoesNotContain(counter.index)}" render="uasHolder" onclick="$(this).tooltip('hide');"><i class="icon-trash">"#{msg['redirect.admin.condition.exp.delete']}</i></a4j:commandLink>
										<a4j:commandLink action="#{rdrEdit.addDoesNotContain}" styleClass="add-user-agent-string tooltipTrigger" title="#{msg['redirect.admin.condition.exp.add']}" render="uasHolder" onclick="$(this).tooltip('hide');" oncomplete="$('.doesnotcontain-input').last().focus();"><i class="icon-plus-sign">#{msg['redirect.admin.condition.exp.add']}</i></a4j:commandLink>
									</div>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
				</h:panelGroup>
			</div><!-- End .control-group -->

			<h:panelGroup id="condition_properties" styleClass="control-group" layout="block">
				<h:panelGroup style="#{rdrEdit.editedCondition.deviceProperties == null or rdrEdit.editedCondition.deviceProperties.size() == 0 ? '' : 'display:none;'}">
					<a4j:commandLink action="#{rdrEdit.addProperty}" styleClass="btn btn-mini pull-right" render="condition_properties" oncomplete="afterAddProperty();">#{msg['redirect.admin.condition.property.add']}</a4j:commandLink>
				</h:panelGroup>
				<table class="table table-striped button-mini" id="condition-properties" style="#{rdrEdit.editedCondition.deviceProperties == null ? 'display: none;' : ''}" summary="Redirect properties">
					<thead>
						<tr>
							<th scope="col">#{msg['redirect.admin.condition.property']} <i class="icon-info-sign icon-gray tooltipTrigger data-placement-right" title="#{msg['redirect.admin.condition.property.spec']}">#{msg['redirect.admin.condition.property.spec']}</i></th>
							<th scope="col" class="hidden-element actions">#{msg['redirect.admin.condition.actions']}</th>
						</tr>
					</thead>
					<tbody>
            <tr style="display: none;"><td></td></tr>
						<ui:repeat value="#{rdrEdit.deviceProperties}" var="rcDevProp" varStatus="counter">
						<tr>
							<td class="condition" colspan="2">
								<ui:param name="rcDevPropOp" value="#{rcDevProp.equals != null ?  'eq' : rcDevProp.greaterThan != null ? (rcDevProp.lessThan != null ? 'bt' : 'gt') : rcDevProp.lessThan != null ? 'lt' : 'mt'}" />
								<h:inputText id="name-rcDevProp" styleClass="property property-name-input" value="#{rdrEdit.deviceProperties[counter.index].propertyName}" />

								<select name="op-rcDevProp" class="attribute property-operator" style="height: 30px;" onchange="changePropertyFields(this, true);" >
									<option value="eq" selected='#{rcDevPropOp == "eq" ? "selected" : ""}'>#{msg['redirect.admin.condition.param.eq']}</option>
									<option value="gt" selected='#{rcDevPropOp == "gt" ? "selected" : ""}'>#{msg['redirect.admin.condition.param.gt']}</option>
									<option value="lt" selected='#{rcDevPropOp == "lt" ? "selected" : ""}'>#{msg['redirect.admin.condition.param.lt']}</option>
									<option value="mt" selected='#{rcDevPropOp == "mt" ? "selected" : ""}'>#{msg['redirect.admin.condition.param.mt']}</option>
									<option value="bt" selected='#{rcDevPropOp == "bt" ? "selected" : ""}'>#{msg['redirect.admin.condition.param.bw']}</option>
								</select>
								<span id="value-holder">
									<h:panelGroup styleClass="pp-bt" style="#{rcDevPropOp == 'bt' ? '' : 'display:none'}">
										<div class="input-append-inline">
											<h:inputText id="val-rcDevProp_bt_gt" styleClass="property-value-input" value="#{rdrEdit.deviceProperties[counter.index].betweenLow}" />
										</div>
										<span class="td-condition">AND</span>
										<div class="input-append-inline">
											<h:inputText id="val-rcDevProp_bt_lt" value="#{rdrEdit.deviceProperties[counter.index].betweenHigh}" />
										</div>
									</h:panelGroup>
									<h:panelGroup styleClass="pp-eq" style="#{rcDevPropOp == 'eq' ? '' : 'display:none'}">
										<div class="input-append-inline">
											<h:inputText id="val-rcDevProp_eq" styleClass="property-value-input" style="width: 128px;" value="#{rdrEdit.deviceProperties[counter.index].equals}" converter="PropertiesConverter" />
										</div>
									</h:panelGroup>
									<h:panelGroup styleClass="pp-mt" style="#{rcDevPropOp == 'mt' ? '' : 'display:none'}">
										<div class="input-append-inline">
											<h:inputText id="val-rcDevProp_mt" styleClass="property-value-input" style="width: 128px;" value="#{rdrEdit.deviceProperties[counter.index].matches}" converter="PropertiesConverter" />
										</div>
									</h:panelGroup>
									<h:panelGroup styleClass="pp-gt" style="#{rcDevPropOp == 'gt' ? '' : 'display:none'}">
										<div class="input-append-inline">
											<h:inputText id="val-rcDevProp_gt" styleClass="property-value-input" value="#{rdrEdit.deviceProperties[counter.index].greaterThan}" />
										</div>
									</h:panelGroup>
									<h:panelGroup styleClass="pp-lt" style="#{rcDevPropOp == 'lt' ? '' : 'display:none'}">
										<div class="input-append-inline">
											<h:inputText id="val-rcDevProp_lt" styleClass="property-value-input" value="#{rdrEdit.deviceProperties[counter.index].lessThan}" />
										</div>
									</h:panelGroup>
								</span>
							</td>
 							<td class="actions" style="width: 50px;" >
 								<a4j:commandLink action="#{rdrEdit.removeProperty(counter.index)}" styleClass="tooltipTrigger" title="#{msg['redirect.admin.condition.property.but.del']}" render="condition_properties" onclick="$(this).tooltip('hide');"><i class="icon-trash">Delete Property</i></a4j:commandLink>
 								<a4j:commandLink action="#{rdrEdit.addProperty}" styleClass="add-property tooltipTrigger" title="#{msg['redirect.admin.condition.property.but.add']}" render="condition_properties" onclick="$(this).tooltip('hide');" oncomplete="afterAddProperty();" style="#{counter.last ? '' : 'visibility: hidden;'}"><i class="icon-plus-sign">Add Property</i></a4j:commandLink>
							</td>
						</tr>
						</ui:repeat>
					</tbody>
				</table>
			</h:panelGroup><!-- End .control-group -->
		</div><!-- End .modal-body -->
		<h:panelGroup layout="block" id="condition_footer" styleClass="modal-footer">
			<b:commandButton value="#{msg['redirect.admin.condition.but.cancel']}" action="#{rdrEdit.rollbackCondition}" oncomplete="$('#modal-condition').modal('hide');" execute="@form" />
			<b:commandButton value="#{msg['redirect.admin.condition.but.save']}" id="save-condition-button" styleClass="btn btn-primary" action="#{rdrEdit.saveCondition}" execute="@form" oncomplete="$('#modal-condition').modal('hide');" render="conditions-group" onclick="$('.property-operator').change();"/>
		</h:panelGroup>
	</h:panelGroup><!-- end .modal -->
	</div><!-- end .modal -->
	</h:form>

</ui:fragment>
